import React, { Component } from 'react'
import axios from "axios"
import CrossPiece from './CrossPiece';
import TableShowContent from './TableShowContent';
import ColumnPiece from './ColumnPiece';
import { Spin } from 'antd';

export default class TableShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            kinds: [],
            years: [],
            isMouse: false,
            clickCrossID: 0, // 横向点击索引
            clickColumnID: 0, // 纵向点击索引
            loading: false, // 加载中状态
        }

        axios.get('/static/memberKinds.json').then(res => {
            let kinds = [];

            res.data.map((item, index) => {
                kinds.push(item);
                return index;
            });

            this.setState({
                kinds
            })
        })

        axios.get('/static/memberYear.json').then(res => {
            let years = [];

            res.data.map((item, index) => {
                years.push(item);
                return index;
            });

            this.setState({
                years
            })
        })
    }

    handleCrossClick = (id) => {
        if (id !== this.state.clickCrossID) {
            this.setState({
                clickCrossID: id,
                loading: true,
            });
        }
    }

    handleColumnClick = (id) => {
        if (id !== this.state.clickColumnID) {
            this.setState({
                clickColumnID: id,
                loading: true,
            });
        }
    }

    handleMouseOver = () => {
        this.setState({
            isMouse: true
        });
    }

    handleMouseOut = () => {
        this.setState({
            isMouse: false
        });
    }

    handleCancelLoading = () => {
        this.setState({
            loading: false
        })
    }

    handleSetState=()=>{
        this.setState({});
    }

    render() {
        return (
            <div style={{
                width: 1200,
                height: 600,
                borderRadius: 10,
            }}>
                <div style={{
                    display: 'flex',
                    marginRight: 150,
                    justifyContent: 'space-between',
                    overflowX: 'hidden',
                }} onMouseOver={this.handleSetState} onMouseOut={this.handleSetState}>
                    {
                        this.state.kinds.map((item, index) => {
                            return <CrossPiece
                                item={item}
                                key={index}
                                id={item.id}
                                clickCrossID={this.state.clickCrossID}
                                handleCrossClick={this.handleCrossClick}
                            />
                        })
                    }
                </div>
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    boxShadow: 'rgba(26, 26, 26, 0.1) 0px 9px 7px'
                }}>
                    <Spin tip="Loading..." spinning={this.state.loading}>
                        <TableShowContent
                            clickCrossID={this.state.clickCrossID}
                            clickColumnID={this.state.clickColumnID}
                            handleCancelLoading={this.handleCancelLoading}
                        />
                    </Spin>
                    <div
                        style={{
                            height: 550,
                            width: 150,
                            overflowX: 'hidden',
                            overflowY: (this.state.isMouse ? 'scroll' : 'hidden')
                        }}
                        onMouseOver={this.handleMouseOver}
                        onMouseOut={this.handleMouseOut}
                    >
                        {
                            this.state.years.map((item, index) => {
                                return <ColumnPiece
                                    key={index}
                                    item={item}
                                    clickColumnID={this.state.clickColumnID}
                                    id={item.id}
                                    handleColumnClick={this.handleColumnClick}
                                />
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}
